<template>
	<view class="container">
		<u-navbar title="登陆" :bgColor="navbarbgColor"> </u-navbar>
		<view class="mainBox">
			<image class="loginImg" src="/static/logo.png" />
			<view class="greetings">山西饲草收储交易中心</view>
			<view class="btnBox">
				<button class="submit" type="primary" :loading="loading" @click="getUserProfile"
					:open-type="isAgreement && isTip == 0 ? 'getPhoneNumber' : ''" @getphonenumber="getphoneNumber">
					手机号快捷登录
				</button>
			</view>
			<!-- <view class="accountLogin" @click="onLocation('/pages/login/index')">手机号登录/注册</view> -->
			<view class="accountLogin" @click="onBack">暂不登录</view>
		</view>

		<view class="footer">
			<checkbox class="agreementBox" :value="isAgreement" :checked="isAgreement"
				@click="isAgreement = !isAgreement" />
			<view class="agreement">请阅读并同意<text @click="goysxy">《用户协议》与《隐私声明》</text>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="20">
			<view>
				<view class="popupNavbar">
					<view class="">

					</view>
					<view class="title">
						选择用户类型
					</view>
					<view class="r" @click="show=false">
						<u-icon name="close"></u-icon>
					</view>
				</view>

				<view class="typeContainer u-flex-xy-center ">
					<view class="typeItem u-flex-xy-center" v-for="(item, key) in typeList" :key="key"
						@click="tabschange(item)">
						<view class="typeLogoUrl u-flex-xy-center">
							<!---->
							<u-image :src="item.logoUrl" width="96rpx" height="96rpx" mode="aspectFit"></u-image>
						</view>
						<view class="typefullName u-flex-xy-center">
							{{ item.fullName }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-button @click="show = true">打开</u-button> -->
		<u-modal :show="showmodal" :showCancelButton="true" :closeOnClickOverlay="true" title="提示" @confirm="confirm"
			@cancel="close" @close="close">
			<view style="text-align: center;">同意《用户协议》与《隐私声明》</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		wxLogin
	} from "@/api/login.js";
	import {
		getProductClass
	} from "@/api/index.js";
	import config from "@/config";
	import {
		setToken
	} from "@/utils/auth";
	import qs from "qs"
	export default {
		data() {
			return {
				showmodal: false,
				show: false,
				loading: false,
				isTip: "0",
				navbarbgColor: 'transparent',
				isAgreement: false,
				typeList: [],
			};
		},
		onLoad(query) {
			// 判断是否提示不能登录
			// this.getDict();
			// 邀请
			// if (JSON.stringify(query) != "{}") {
			// 	uni.setStorageSync('invite', query);
			// 	uni.setStorageSync('isInvite', query.isInvite);
			// }
			this.init();
			// this.login();
		},
		methods: {
			async init() {
				let classlist = await getProductClass({
					classType: 1
				});
				classlist = classlist.data;
				this.typeList = classlist;
			},
			confirm() {
				this.showmodal = false;
				this.isAgreement = true;
			},
			close() {
				this.showmodal = false;

			},
			// 封装微信获取用户code，避免嵌套
			login() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							console.log(res);
							resolve(res);
						},
						fail(err) {
							reject(err);
						},
					});
				});
			},

			// 跳转页面
			onLocation(url) {
				uni.navigateTo({
					url,
				});
			},
			// 字典数据
			getDict() {
				selectDictDataByType({
					dictType: "login_prompt",
				}).then((res) => {
					this.isTip = res[0].dictValue;
				});
			},
			// 获取信息
			getUserProfile() {
				// wx.getUserInfo({
				// 	success: (res) => {
				// 		console.log('用户信息:', res);

				// 	},
				// 	fail: (err) => {
				// 		console.error('获取用户信息失败:', err);
				// 	}
				// });
				// wx.getUserProfile({
				// 	desc: '用于完善会员资料', // 必填，声明获取用户信息的用途
				// 	success: (res) => {
				// 		console.log('用户信息:', res);

				// 	},
				// 	fail: (err) => {
				// 		console.error('获取用户信息失败:', err);
				// 	}
				// });
				if (!this.isAgreement) {
					// uni.showToast({
					// 	icon: "none",
					// 	title: "请阅读并同意《用户协议》与《隐私声明》",
					// });
					this.showmodal = true;
					return true;
				}
				// if (this.isTip == 1) {
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: "项目维护中，暂时无法使用",
				// 	});
				// 	return;
				// }

				this.loading = true;
			},
			// 获取电话
			async getphoneNumber(e) {

				let res = await this.login();
				let data = await wxLogin({
					phoneCode: e.detail.code,
					loginCode: res.code,
					state: "34",
				});
				console.log(data);
				setToken(data.data);
				uni.navigateBack()
				// return
				// uni.redirectTo({
				// 	url: "/pages/index/index",
				// });
				// console.log(e, 123);
				// this.loading = false;
				// if (['getPhoneNumber:ok'].includes(e?.detail?.errMsg)) {
				// 	uni.showLoading({
				// 		title: '获取中'
				// 	});
				// 	this.handlePolling(e)
				// } else {
				// 	console.log(e)
				// }
			},
			// 轮询查询是否有sessionKey,防止初始化接口响应时间过长拿不到解密入参，用户解密失败
			handlePolling(e) {
				this.decryptDataInfo(e.detail);
			},
			// 解密获取手机号码，区号
			async decryptDataInfo(detail) {
				let params = {
					code: detail.code,
					openId: this.openId,
				};
				console.log(params);
				bindPhone(params).then((res) => {
					wxLogin({
						phoneNumber: res.WxMaPhoneNumberInfo.phoneNumber,
						openId: this.openId,
					}).then(async (loginRes) => {
						uni.hideLoading();
						uni.setStorageSync("token", loginRes.sessionId);
						// 获取数据
						await getUserInfo().then((infoRes) => {
							uni.setStorageSync("userInfo", infoRes.userInfo);
						});
						// 更新余额
						userAmount().then((aRes) => {
							uni.setStorageSync("userAmount", aRes.balance);
						});
						// 提示并跳转
						uni.showToast({
							title: `登录成功`,
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: "/pages/index/index",
									});
								}, 1500);
							},
						});
					});
				});
			},
			onBack() {
				uni.navigateBack();
			},
			goysxy() {
				uni.navigateTo({
					url: "/pages/parse/parse?" + qs.stringify({
						type: 'YSXY'
					}),
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.popupNavbar {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;

		.r {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.typeContainer {
		flex-wrap: wrap;
		background: #fff;
		// margin: 20rpx;
		// padding: 16rpx 0;
		justify-content: flex-start;

		.typeItem {
			width: 25%;
			height: 150rpx;
			flex-direction: column;

			.typefullName {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #606266;
			}
		}
	}

	.container {
		min-height: calc(100vh - var(--window-top) - 64rpx);
		padding: 0 38rpx 64rpx;
		position: relative;

		.greetings {
			font-size: 50rpx;
			font-weight: bold;
			color: #39C03E;
			letter-spacing: 4rpx;
		}

		.mainBox {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;

			.loginImg {
				width: 190rpx;
				height: 190rpx;
				margin: 20vh auto 45rpx;
			}

			.btnBox {
				width: 100%;
				margin-top: 150rpx;

				button {
					width: 80%;
					font-size: 28rpx;
					font-weight: bold;
					margin: 20rpx auto;
					line-height: 98rpx;
					border-radius: 50rpx;

					&::after {
						border: none;
					}
				}

				.submit {
					width: 75%;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #f7f7f7;
					// margin: 0;
					border-radius: 50rpx;
					background: linear-gradient(80deg, #39C03E 34%, #a1e9a3 100%);
				}

				.reset {
					color: rgba(0, 0, 0, 0.8);
					background: #ffffff;
				}
			}

			.accountLogin {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				padding: 10rpx 0 40rpx;
			}
		}
	}

	._showModal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10000;

		._shade {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: #000;
			opacity: 0.6;
			z-index: 11000;
		}

		._modalBox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 12000;
			display: flex;
			align-items: center;
			justify-content: center;

			._modal {
				flex: none;
				width: 90%;
				background: #fff;
				border-radius: 12px;

				.title {
					color: #333;
					font-size: 16px;
					font-weight: bold;
					text-align: center;
					margin-top: 20px;
				}

				.content {
					width: 80%;
					min-height: 150px;
					margin: auto;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;

					button {
						width: 80%;
						color: #fff;
						font-size: 28rpx;
						font-weight: bold;
						line-height: 98rpx;
						border-radius: 50rpx;
						background: #0062f9;

						&::after {
							border: none;
						}
					}
				}
			}
		}
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 165rpx;

		.agreement {
			color: #888888;
			font-size: 24rpx;
			font-weight: bold;

			text {
				color: #39C03E;
			}
		}

		.agreementBox {
			transform: scale(0.5);
		}

		::v-deep checkbox {
			.wx-checkbox-input {
				border-color: #888888;
			}

			.wx-checkbox-input.wx-checkbox-input-checked {
				color: #fff;
				background: #39C03E;
				border: 1rpx solid #ffffff;
			}
		}
	}
</style>